
import React, { useEffect, useState } from 'react'
import Tofooter from '../pages/Tofooter/Tofooter'
import Toheader from '../pages/Toheader/Toheader'
import Tomain from '../pages/Tomain/Tomain'
import { nanoid } from "nanoid"
import "./ToDoList.css"
import useaxios from '../../utils'
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import { getvalue, delvalue } from "../../api/Todolist.js"


export default function () {
  let [connet, setconnet] = useState([])
  // 添加数据
  //   let addtitle = (title) => {
  //     setconnet([...connet, {
  //       id: nanoid(),
  //       title: title,
  //       type: false

  //     }])

  //   }
  //   // 删除数据
  //   let deltitle = (id) => {
  //     let newtitle = connet.filter((iteam) => {
  //       return iteam.id !== id
  //     })
  //     setconnet(newtitle)
  //   }
  //   // 改变选择框的状态
  //   let updatatitle = (id) => {
  //     let newtitle = connet.map((iteam) => {
  //       if (iteam.id === id) {
  //         iteam.type = !iteam.type
  //       }
  //       return iteam
  //     })
  //     setconnet(newtitle)
  //   }
  //   // 获取输入框是true的个数

  //   let gettype = () => {
  //     let cc = connet.filter((iteam) => {
  //       if (iteam.type === true) {
  //         return iteam
  //       }
  //     })
  //  return cc
  //   }
  //   // 删除勾选的所有数据
  //   let delall = ()=>{
  //    let newtitle= connet.filter((iteam)=>{
  //     return !iteam.type 
  //     })
  //     setconnet(newtitle)

  //   }


  // 添加数据
  // let addtitle = (title) => {
  //     setconnet([...connet, {
  //       id: nanoid(),
  //       title: title,
  //       type: false

  //     }])

  //   }
  //   // 删除数据
  //   let deltitle = (id) => {
  //     let newtitle = connet.filter((iteam) => {
  //       return iteam.id !== id
  //     })
  //     setconnet(newtitle)
  //   }
  //   // 改变选择框的状态
  //   let updatatitle = (id) => {
  //     let newtitle = connet.map((iteam) => {
  //       if (iteam.id === id) {
  //         iteam.type = !iteam.type
  //       }
  //       return iteam
  //     })
  //     setconnet(newtitle)
  //   }
  //   // 获取输入框是true的个数

  //   let gettype = () => {
  //     let cc = connet.filter((iteam) => {
  //       if (iteam.type === true) {
  //         return iteam
  //       }
  //     })
  //  return cc
  //   }
  //   // 删除勾选的所有数据
  //   let delall = ()=>{
  //    let newtitle= connet.filter((iteam)=>{
  //     return !iteam.type 
  //     })
  //     setconnet(newtitle)

  //   }




  //   // 全选
  let changall = (done) => {
    let primses = connet.map((iteam) => {
      return useaxios({
        method: "patch",
        url: `/todolist/${iteam.id}`,
        data: {
          type: done
        }
      })
    })

    let newtitle = connet.map((iteam) => {
      iteam.type = done
      return iteam
    })
    setconnet(newtitle)

  }

  //添加数据
  let addtitle = async (title) => {
    let data = await useaxios({
      method: "post",
      url: "http://localhost:8888/todolist",
      data: {
        title: title,
        type: false
      }
    })
    toast.success("添加成功")
    setconnet([...connet,
      data
    ])
  }

  // 勾选多选框
  let changeval = (id, type) => {
    useaxios({
      method: "patch",
      url: `/todolist/${id}`,
      data: {
        type: type
      }
    })
    let newtitle = connet.map((iteam) => {
      if (iteam.id === id) {
        iteam.type = !iteam.type
      }
      return iteam
    })
    setconnet(newtitle)
  }
  // axios初始化请求数据
  useEffect(() => {
    getvalue().then(val => {
      setconnet(val)
    })
  }, [])

  // 删除数据
  let deltitle = async (id) => {
    await delvalue(id)
    toast.success("删除成功")
    // connet.filter()
    getvalue().then((res) => {
      setconnet(res)
    })
    // let newtitle = connet.filter((iteam) => {
    //   return iteam.id !== id
    // })
    // setconnet(newtitle)
  }

  //   // 删除勾选的所有数据
  let delall = () => {
    connet.map()
    let newtitle = connet.filter((iteam) => {
      return !iteam.type

    })
    newtitle.map((iteam) => {
      useaxios({
        method: "delete",
        url: `/todolist/${iteam.id}`
      })
    })
    setconnet(newtitle)

  }
  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Toheader addtitle={addtitle} ></Toheader>
        <Tomain deltitle={deltitle} changeval={changeval} connet={connet} />
        <Tofooter changall={changall} delall={delall} connet={connet} />
        <ToastContainer></ToastContainer>
      </div>
    </div>

  )
}
